<template>
	<div>
		<scroller :on-refresh="refresh" :on-infinite="infinite" ref="commonScroller">
			<group id="commonScroller" class="commonScroller">
				<cell
					v-for="(item,index) in items"
					:title="item.title"
					@click.native="jumpTo(item.id)"
					@touchstart.native="showDeleteButton(index, item)"
					@touchend.native="clearLoop(item.id)"
					:inline-desc="item.content"
					:value="item.time">
					<div class="itemTime">{{item.time}}</div>
					<div class="tag">正课</div>
				</cell>
			</group>
		</scroller>
	</div>
</template>

<script>
	import Vue from 'vue'
	import NetWorking from '../../../utils/networking'
	import { Group, Cell, ConfirmPlugin, Tab, TabItem} from 'vux'
	import VueScroller from 'vue-scroller'
	Vue.use(VueScroller)
	Vue.use(ConfirmPlugin)

	const SIZE = 20

	export default {
		name: "scrollerComplex",
		components: {
			Group,
			Cell,
			Tab,
			TabItem
		},
		props: ['curURL', 'jumpToObjectDetails'],
		data() {
			return {
				offset: 0,
				limit: SIZE,
				noMoreData: false,
				items: [],
			}
		},
		watch: {
			curURL: function () {
				this.offset = 0
				this.limit = SIZE
				this.noMoreData = false
				this.items = []
				this.$refs.commonScroller.finishPullToRefresh(false)
				this.$refs.commonScroller.finishInfinite(false)
			}
		},
		methods:{
			refresh (done) {
				this.$refs.commonScroller.finishPullToRefresh(true)
				return
			},
			infinite (done) {
				if(this.noMoreData){
					this.$refs.commonScroller.finishInfinite(true)
					return
				}else{
					let _this = this
					_this.offset += 1
					this.isRunning = true
					NetWorking.doGet(
						this.curURL,
						null ,
						{
							params:{
								offset: _this.offset,
								limit: _this.limit
							}
						}
					).then(
						response => {
							let res = response.data
							if (res.error_code == 0) {
								if(res.page_info.list.length >= 0){
									_this.items.push.apply(_this.items, res.page_info.list)
									_this.bottom += res.page_info.list.length
									//set noMoreData flag to true if current size < limit
									if(res.page_info.list.length < _this.limit){
										_this.noMoreData = true
										_this.$refs.commonScroller.finishInfinite(true);
										return
									}
								}
							} else {
								alert(res.error_message)
							}
							done()
						}
					)
				}
			},
			jumpTo: function (id) {
				//组件间传递参数
				this.$router.push({ name: this.jumpToObjectDetails, params: { id: id }})
			},
			showDeleteButton(index, activity) {
				let hasAdminRole = false
				for(var i=0; i < this.$store.state.user.userModel.sysRoleList.length; i++){
					if(this.$store.state.user.userModel.sysRoleList[i].role_name == 'admin'){
						hasAdminRole = true
					}
				}
				if(hasAdminRole == false){
					return
				}

				var _this = this;
				clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
				this.Loop = setTimeout(function() {
					let thisObj = this
					thisObj.$vux.confirm.show({
						title: '系统提示',
						content: '确认要删除吗?',
						onConfirm () {
							NetWorking.doDelete(
								'/activities',
								null,
								{
									params: {
										id: activity.id
									}
								}
							).then(
								response => {
									let rs = response.data
									if(rs.error_code == 0){
										_this.items.splice(index, 1);
									}else{
										alert(rs.error_message);
									}
								}
							)
						}
					})
				}.bind(this), 1000);
			},
			clearLoop(id) {
				clearInterval(this.Loop);
			}
		}
	}
</script>

<style>
	.commonScroller {
		margin-top: 96px;
	}

	.tag {
		text-align: right;
		background: red;
		width: fit-content;
		color: white;
		padding-left: 5px;
		border-radius: 5px;
		padding-right: 5px;
		font-size: 13px;
	}

	.itemTime {
		display: block;
		-webkit-margin-before: 1em;
		-webkit-margin-after: 1em;
		-webkit-margin-start: 0px;
		-webkit-margin-end: 0px;
		line-height: 1.41176471;
		font-size: 13px;
	}
</style>